<template>
	<uni-popup class="loginPopup" ref="popup" background-color="#fff" @change="change">
		<view class="container">
			<view class="title">
				<text>登录后可体验更多功能</text>
				<image @click="$refs.popup.close()" src="@/static/images/close-d.png" mode="aspectFill"></image>
			</view>
			<view class="avatar">
				<button open-type="chooseAvatar" @chooseavatar="onChooseAvatar" class="updateAvatar">
					<image :src="info.image"></image>
				</button>
				<image src="@/static/images/camera.png" mode="aspectFill"></image>
			</view>
			<view class="input-box">
				<text>昵称</text>
				<input type="nickname" @blur="onNicknameBlur" placeholder="请输入昵称" v-model="info.nickname" placeholder-class="pls_nick_name" />
			</view>
			<view class="hint">99%+的用户是有选择微信头像和微信昵称， 便于订单发货和售后沟通</view>
			<button @click="handleLogin">立即登录</button>
		</view>
	</uni-popup>
</template>

<script>
import { msg, get_userInfo } from '@/common/common_fun.js';
import API from '@/common/api.js';
export default {
	data() {
		return {
			info: {
				image: '',
				nickname: ''
			}
		};
	},
	mounted() {
		let data = uni.getStorageSync('localStorage');
		if (Object.keys(data).length > 0) {
			data.nickname = data.name;
			Object.assign(this.info, data);
		}
	},
	methods: {
		onNicknameBlur(e) {
			this.$set(this.info, 'nickname', e.detail.value);
		},
		handleLogin() {
			if (!this.info.image) {
				this.msg('请设置用户头像');
			}
			if (!this.info.nickname) {
				this.msg('请设置用户昵称');
			}
			uni.showLoading({
				title: '加载中',
				mask: true
			});
			this.$http.getJson('users_editInfo', this.info).then((res) => {
				uni.hideLoading();
				if (res.code === 1) {
					get_userInfo();
					this.msg(res.message, () => {
						this.toBack();
					});
				} else {
					this.msg(res.message);
				}
			});
		},
		//头像
		onChooseAvatar(e) {
			let file = e.detail.avatarUrl;
			API.getUpload('index_ossupload', file, {}).then((res) => {
				const { code, data, message } = res;
				if (code === 1) {
					this.info.image = data;
					this.$store.commit('$setStore', { image: data });
				}
			});
		},

		change() {
			// 更新数据
			this.$emit('handleUpdate');
		},
		open() {
			this.$refs.popup.open('center');
		},
		close() {
			this.$refs.popup.close('bottom');
		}
	}
};
</script>

<style lang="less" scoped>
.loginPopup {
	position: fixed;
	z-index: 998;
	.container {
		.fix-c();
		width: 574rpx;
		height: 758rpx;
		background: #ffffff;
		border-radius: 16rpx;
		.title {
			position: relative;
			margin: 58rpx 0;
			font-size: 28rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #000000;
			text-align: center;
			image {
				.fix-c-y();
				right: 32rpx;
				width: 23rpx;
				height: 23rpx;
			}
		}
		.avatar {
			.fix-c-x();
			width: 152rpx;
			height: 152rpx;
			background: #ebeff8;
			border-radius: 50%;
			&:active {
				margin-top: 1px;
			}
			& > image {
				position: absolute;
				z-index: 2;
				top: 100rpx;
				right: 0;
				width: 48rpx;
				height: 36rpx;
			}
			.updateAvatar {
				position: relative;
				z-index: 1;
				width: 152rpx;
				height: 152rpx;
				background-color: transparent;
				border-radius: 50%;
				&::before {
					.fix-c();
					z-index: -1;
					display: block;
					content: '';
					width: 64rpx;
					height: 64rpx;
					border-radius: 50%;
					background: #ffffff;
				}
				&::after {
					.fix-c-x();
					z-index: -1;
					top: 110rpx;
					display: block;
					content: '';
					width: 126rpx;
					height: 63rpx;
					border-radius: 50%;
					background: #8e94b4;
				}
				image {
					.fix-c();
					width: 152rpx;
					height: 152rpx;
				}
			}
		}
		.input-box {
			.fix-c-x();
			top: 372rpx;
			display: flex;
			text {
				font-size: 28rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #000000;
				white-space: nowrap;
			}
			.pls_nick_name {
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
			}
			input {
				border-bottom: 1rpx solid #707070;
				padding-left: 1em;
				font-size: 28rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #000;
			}
		}
		.hint {
			.fix-c-x();
			top: 444rpx;
			width: 510rpx;
			height: 122rpx;
			padding: 20rpx;
			background: #f6f7fb;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
		}
		& > button {
			.fix-c-x();
			top: 630rpx;
			width: 510rpx;
			height: 64rpx;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			background: @basecolor;
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			line-height: 64rpx;
		}
	}
}
</style>
